<template>
  <div class="order">
    <div class="order-header">
      <div class="oreder-num">
        <p class="p1">订单信息</p>
        <p class="p2">
          <span>消费订单:</span>
          <span>0</span>
          <span>总消费:</span>
          <span>0</span>
        </p>
      </div>

      <div class="oreder-img">
        <img
          src=""
          alt=""
        >
      </div>
    </div>
    <div class="data-po">
      <div class="data">
      <div
        class="data-item"
        v-for="item in datalist"
        :key="item.id"
      >
        <p> {{item.title}}</p>
        <p>0</p>
      </div>
    </div>
    </div>

    <van-empty description="无" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      datalist: [
        { id: 0, title: "待付款", type: 0 },
        { id: 1, title: "待发货", type: 1 },
        { id: 2, title: "待收货", type: 2 },
        { id: 3, title: "待评价", type: 3 },
        { id: 4, title: "已完成", type: 4 },
      ],
    };
  },
};
</script>
<style lang="scss">
.order {
  * {
    margin: 0px;
    padding: 0px;
  }
  .order-header {
    background: #e93323;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid red;
    .oreder-num{
      display: inline-block;
      margin-top: 15%;
    }
    .oreder-img{
      // display: inline-block;
      // margin: 0px;
      padding: 0px;
      float: right;
      margin-top: 5%;
      img{
        width: 50%;
        height: 50%;
        display: inline-block;
      }
    }
  }
  .data-po{
    width: 90%;
    margin: 0 auto;
    height: 50px;
    margin-top: -45px;
    .data{
    display: flex;
    border: 1px solid black;
    border-radius: 5px;
    background:#fff;
    .data-item{
      width: 20%;
      text-align: center;
      line-height: 50px;
    }
    .data-item:hover{
      color: red;
    }
  }
  }
  .van-empty{
    margin:25%;
  }
}
</style>